<template>
  <div>
    <el-container>
      <el-header align="left">
        <font color="white" size="5px">{{this.$route.query.theme}}</font>
      </el-header>
      <el-main>
        <el-radio-group style="width:100%" v-model="choise">
          <div class="vote-main" align="left" v-for="(vote,index) in votes" :key="index">
            <el-radio :label="vote.opt" style="margin-left:20px;">{{vote.opt}}</el-radio>
            <!-- <el-progress style="width:80%;" :text-inside="true" :stroke-width="26" :percentage="70"></el-progress> -->
          </div>
        </el-radio-group>
      </el-main>
      <el-footer align="center">
        <el-button type="success" @click="upvote">投票</el-button>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      choise: "",
      votes: []
    };
  },
  methods: {
    getList() {
      this.axios({
        method: "get",
        url: this.requestUrl + "vote/list",
        params: {
          tid: this.$route.query.tid
        }
      }).then(res => {
        console.log("根据tid查询的结果为", res);
        this.votes = res.data.obj;
      });
    },
    upvote() {
      let vote = {};
      vote.tid = this.$route.query.tid;
      vote.opt = this.choise;
      this.axios({
        method: "get",
        url: this.requestUrl + "vote/vote",
        params: vote
      }).then(res => {
        console.log("投票结果", res);
        if (res.data.code == 200) {
          this.$message({
            message: res.data.msg,
            type: "success"
          });
        }
      });
    }
  },
  mounted() {
    this.getList();
  }
};
</script>
<style scoped>
.el-container {
  background: rgb(255, 255, 255, 0.5);
  width: 80%;
  margin-left: 10%;
}
.vote-main {
  justify-content: left;
  align-items: center;
  display: -webkit-flex;
  width: 100%;
  height: 50px;
  margin-bottom: 10px;
  background: rgb(255, 255, 255, 0.2);
}
</style>
